<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>商品展示</title>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/bootstrap.min.css">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/style.css">

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}

#head {
	height: 40px;
	background: #F5F5F5;
}

#c_head {
	width: 1000px;
	height: 40px;
	position: relative;
	left: 50%;
	margin-left: -500px;
	color: #F8F8F8;
}

#c_head div {
	float: left;
}

#d1 {
	width: 400px;
	position: relative;
	font-family: arial;
	height: 40px
}

#d2 {
	width: 600px;
	position: relative;
	left: 100px;
	height: 40px;
}

#d1 li, #d2 li {
	list-style: none;
	height: 30px;
	float: left;
	position: relative;
	top: 12px;
	margin-left: 20px;
}

#c_head a:VISITED, #c_head a:LINK {
	color: #5c5452;
	text-decoration: none;
}

#c_head a:HOVER {
	color: #F30213;
	font-weight: bold;
}

.s {
	color: #DA1026;
}

.dropdown {
	display: inline-block;
	z-index: 100; /*****************************************************/
}

.dropdown:hover {
	/*background-color: pink;*/
	
}

.dropbtn {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 12px 16px;
	text-decoration: none;
}

.dropdown-content {
	z-index: 100;
	display: none;
	position: absolute;
	background-color: #F5F5F5;
	min-width: 90px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	/*color: black;*/
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	background-color: #F73650;
}

.dropdown-content a:hover span {
	color: white;
}

.dropdown:hover .dropdown-content {
	display: block;
}

#nav {
	height: 100px;
	border-bottom: 3px #F73650 solid;
	margin-bottom: 1px;
}

#c_nav {
	height: 100px;
	width: 1000px;
	position: relative;
	left: 50%;
	margin-left: -500px;
	z-index: 80; /******************************************************/
}

#c_nav div {
	float: left;
}

#logo {
	position: relative;
	top: 0px;
	left: 20px;
}

#search {
	width: 700px;
	position: relative;
	left: 150px;
}

#in {
	height: 40px;
	width: 500px;
	position: relative;
	top: 27px;
	border-radius: 6px;
	border: 1px #DA1026 solid;
	font-size: 20px;
}

#in::-webkit-input-placeholder {
	color: #aab2bd;
	font-size: 15px;
	text-align: right;
}

#su {
	height: 40px;
	width: 120px;
	background: #FA2846;
	font-size: 18px;
	color: #fff;
	font-weight: bold;
	position: relative;
	top: 27px;
	border-radius: 6px;
	border: 0px #FA2846 solid;
	cursor: pointer;
}
.container{
	background:#f5f5f5;
}
</style>
</head>
<body>
	<%-- <jsp:include page="head.jsp"></jsp:include> --%>


	<input type="hidden" id="user"
		value="<%=session.getAttribute("loginUser")%>" />
	<div id="head">
		<div id="c_head">
			<div id="d1">
				<ul>
					<li><a href="index.html">欢迎访问</a></li>
					<c:if test="${loginUser eq null }">
						<li><a href="<%=request.getContextPath()%>/user/login"
							class="login" style="color: #F30213;">请登录</a></li>
						<li><a href="<%=request.getContextPath()%>/user/register"
							class="register">免费注册</a></li>
					</c:if>
					<c:if test="${loginUser ne null }">
						<li><a href="<%=request.getContextPath()%>/user/my_shopping"
							class="user" style="color: #4C8FBD;">${loginUser.username }</a></li>
						<li><a href="<%=request.getContextPath()%>/user/logout"
							class="user">退出登录</a></li>
					</c:if>
				</ul>
			</div>
			<div id="d2">
				<ul value="${loginUser}">
					<li><a href="<%=request.getContextPath()%>/index.html">购物网首页</a></li>
					<li><a href="<%=request.getContextPath()%>/user/my_shopping">订单</a></li>
					<li><a href="<%=request.getContextPath()%>/cart/my_cart"><img
							src="<%=request.getContextPath()%>/img/cart.png">购物车<span
							class="s">${cartSize }</span></a></li>
					<div class="dropdown">
						<a class="dropbtn" style="color: black">商品分类</a>
						<div class="dropdown-content">
							<%-- <c:foreach> --%>
							<a href=""><span>送TA</span></a> <a href=""><span>送父母</span></a> <a
								href=""><span>送亲友</span></a>
							<%-- </c:foreach> --%>

						</div>
					</div>
					<div class="dropdown">
						<a class="dropbtn" style="color: black">个人中心</a>
						<div class="dropdown-content">
							<a href="<%=request.getContextPath()%>/user/personal_imformation"><span>个人信息修改</span></a>
							<a href="<%=request.getContextPath()%>/user/password_imformation"><span>密码修改</span></a>
							<a href="<%=request.getContextPath()%>/user/address_imformation"><span>地址管理</span></a>
						</div>
					</div>
				</ul>
			</div>
		</div>
	</div>

	<!-- 搜索框，不需要的页面删除掉  ，原来界面有搜索框的，把那个删除掉用这个，因为css不同 -->
	<div id="nav">
		<div id="c_nav">
			<div id="logo">
				<img src="<%=request.getContextPath()%>/img/logo.png"
					style="height: 102px;" />
			</div>
			<div id="search">
				<form
					action="<%=request.getContextPath()%>/product/fuzzyQueryByCategory"
					method="post" >
					<input type="text" name="name" id="in" autocomplete="off"
						placeholder="商品搜索 &nbsp;"> <input type="hidden" name="cid"
						value="${cid }"> <input type="submit" value="搜&nbsp;索"
						id="su">
				</form>
			</div>

		</div>
	</div>

	<%-- <div id="nav">
    	<div id="c_nav">
    		<div id="search">
		    	<form action="<%=request.getContextPath() %>/product/fuzzyQueryByCategory" method="post">
		    		<input type="hidden" name="cid" value="${cid }" >
		    		<input type="text" name="name" id="in" autocomplete="off">
		    		<input type="submit" value="搜&nbsp;索" id="su">
		    	</form>
	    	</div>
    	</div>
    </div> --%>


	<div class="container">
		<div class="row sectionTitle">
			<h3>商品展示</h3>
			<h5>了解我们最新的系列</h5>
		</div>
		<div class="row">
			<c:forEach items="${products }" var="product">
				<div class="col-sm-3 product">
					<div class="productInner row m0">
						<div class="row m0 imgHov">
							<a
								href="<%=request.getContextPath() %>/product/${product.id }/item"
								target="${product.id }"> <img alt=""
								src="<%=request.getContextPath()%>/image/${product.imgs[0].name }">
								<div class="row m0 hovArea">
									<div class="row m0 proPrice">
										<i class="fas fa-usd"> </i>￥
										<fmt:formatNumber type="number"
											value="${product.price * product.discount }"></fmt:formatNumber>
									</div>
								</div>
							</a>
						</div>

						<div class="row m0 proName">
							<a
								href="<%=request.getContextPath() %>/product/${product.id }/item"
								target="${product.id }">${product.name }</a>
						</div>
						<div class="row m0 proBuyBtn">
							<a
								href="<%=request.getContextPath() %>/product/${product.id }/item"
								target="${product.id }">
								<button class="addToCart btn">查看详情</button>
							</a>
						</div>
					</div>
				</div>
			</c:forEach>
		</div>
	</div>

	<script src="<%=request.getContextPath()%>/js/jquery-2.1.3.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>

</body>
</html>